<template>
  <div class="ground_recovery" v-loading="loading">
    <!-- 头部 -->
    <div class="header_box">
      <span @click="goHome">
        <img
          class="imgOne"
          src="~@/assets/duZhongTai/left_icon.png"
          alt=""
          srcset=""
        />
      </span>
      <span class="title">钉住</span>
      <span>
        <!-- <img
          class="imgTwo"
          src="~@/assets/duZhongTai/more.png"
          alt=""
          srcset=""
        /> -->
      </span>
    </div>
    <!-- 内容 -->
    <div class="du_details_c">
      <!-- 嘟消息 -->
      <div
        class="du_content"
        ref="scroll_du"
        @scroll="scrollBottom"
        v-if="duList.length > 0"
      >
        <div
          v-for="(item, index) of duList"
          :key="index"
          class="du_box"
          @click.stop="handleDetails(item)"
          v-show="item.isCollect == '1'"
        >
          <img
            class="file_dd"
            src="~@/assets/duZhongTai/fileTwo.png"
            alt=""
            srcset=""
          />
          <!-- <span class="left_img">
            <img
              class="du_img"
              src="~@/assets/duZhongTai/duLogo.png"
              alt=""
              srcset=""
            />
          </span> -->
          <span class="left_img">
            <img
              v-if="item.sceneTypeCollect == '嘟执行'"
              src="http://134.64.251.212:8084/cpcp/imgUrl/zhixingNew.png"
              alt=""
              srcset=""
            />
            <img
              v-if="item.sceneTypeCollect == '嘟预警'"
              src="http://134.64.251.212:8084/cpcp/imgUrl/yujingNew.png"
              alt=""
              srcset=""
            />
            <img
              v-if="item.sceneTypeCollect == '消息通知类'"
              src="http://134.64.251.212:8084/cpcp/imgUrl/tongzhiNew.png"
              alt=""
              srcset=""
            />
            <img
              v-if="item.sceneTypeCollect == '知识通知类'"
              src="http://134.64.251.212:8084/cpcp/imgUrl/xiaoxiNew.png"
              alt=""
              srcset=""
            />
            <img
              v-if="
                item.sceneTypeCollect != '嘟执行' &&
                item.sceneTypeCollect != '嘟预警' &&
                item.sceneTypeCollect != '消息通知类' &&
                item.sceneTypeCollect != '知识通知类'
              "
              src="http://134.64.251.212:8084/cpcp/imgUrl/otherTwoNew.png"
              alt=""
              srcset=""
            />
          </span>
          <div class="du_c">
            <div class="du_c_i">
              <span>
                <!-- {{ item.title }} -->
                {{
                  item.title.length >= 10
                    ? item.title.substring(0, 10) + "..."
                    : item.title
                }}
              </span>
              <!-- <span>
                <img
                  v-if="item.sceneType == '嘟执行'"
                  src="../../../../assets/duZhongTai/zhixing.png"
                  alt=""
                  srcset=""
                />
                <img
                  v-if="item.sceneType == '嘟预警'"
                  src="../../../../assets/duZhongTai/yujing.png"
                  alt=""
                  srcset=""
                />
                <img
                  v-if="item.sceneType == '消息通知类'"
                  src="../../../../assets/duZhongTai/tongzhi.png"
                  alt=""
                  srcset=""
                />
                <img
                  v-if="item.sceneType == '知识通知类'"
                  src="../../../../assets/duZhongTai/xiaoxi.png"
                  alt=""
                  srcset=""
                />
              </span> -->
            </div>
            <div class="du_c_t">
              <!-- {{
                item.content === "" || item.content === null
                  ? "暂无内容"
                  : item.content
              }} -->
              <div
                class="get_content"
                v-html="getContent(item.content)"
                v-if="item.content"
              ></div>
            </div>
            <!-- <div style="margin-top: 5px;">发送时间：{{item.createTime}}</div> -->
          </div>
          <div class="collect">
            <span @click.stop="handleNoLike(item)" style="margin-right: 10px">
              <van-icon
                style="font-size: 18px"
                name="like-o"
                :color="item.like === 1 ? '#ee0a24' : ''"
              />
            </span>
          </div>
        </div>
        <div v-if="noMore" class="no_more">没有更多了...</div>
      </div>
      <div v-else>
        <van-empty description="暂无数据..." />
      </div>
    </div>
  </div>
</template>

<script>
import Vue from "vue";

import { Popover } from "vant";
import { Icon } from "vant";
import { Tab, Tabs } from "vant";
import { Button } from "vant";
import { Badge } from "vant";
import { Dialog } from "vant";
Vue.use(Badge);
Vue.use(Button);
Vue.use(Tab);
Vue.use(Tabs);

Vue.use(Icon);
Vue.use(Popover);
Vue.use(Dialog);
import { Toast } from "vant";
export default {
  data() {
    return {
      loading: false,
      noMore: false,
      pageNum: 1,
      pageSize: 20,
      total: 0,
      staffAccount: "",
      duList: [],
    };
  },
  watch: {},
  activated() {
    console.log("--2222-", this.$route.params.staffAccount);
    this.staffAccount = this.$route.params.staffAccount;
    if (this.staffAccount) {
      this.pageNum = 1;
      this.duList = [];
      this.getDuData();
    }
  },
  created() {
    // this.getDuData();
  },
  mounted() {},
  methods: {
    //返回
    goHome() {
      this.$router.go(-1); // 返回上一页
    },
    //获取列表数据
    getDuData() {
      this.loading = true;
      this.$http({
        url: this.$http.adornUrl("/cpcpDuMiddleground/getContect"),
        method: "get",
        params: this.$http.adornParams({
          pageSize: this.pageSize,
          pageNum: this.pageNum,
          staffAccount: this.staffAccount, //工号
        }),
      }).then(({ data }) => {
        if (data && data.code === 0) {
          // this.duList = [];
          this.loading = false;
          console.log("data==", data);
          if (data.data.records.length) {
            this.duList = [...this.duList, ...data.data.records]; // 合并数据
          } else {
            this.noMore = true; // 用一个变量来记录没有更多数据了
          }
        } else {
          Toast.fail(data.msg);
        }
      });
    },
    /** 判断滚动到底部 */
    scrollBottom(e) {
      const { scrollTop, scrollHeight, clientHeight } = e.srcElement;
      // 滚动距离顶部高度 + 可视区域高度 >= 滚动内容高度，说明滚动到底
      if (scrollTop + clientHeight >= scrollHeight) {
        console.log("触底了，加载数据");
        if (this.noMore) return;
        this.pageNum++;
        this.getDuData();
      } else {
        // console.log("到底了");
      }
    },
    /** 请求后端分页数据，滚动到底加载更多 */
    async getMoreData() {
      const { data: res } = await axios.post(`xxxx`, {
        pageSize: 4,
        pageIndex: this.pageIndex - 1,
      });
      if (res.code === 200) {
        // 数组有值说明还有数据
        if (res.data.length) {
          this.pageIndex++;
          this.data = [...this.data, ...res.data]; // 合并数据
        } else {
          this.noMore = true; // 用一个变量来记录没有更多数据了
        }
      }
    },
    getContent(item) {
      let str = "";
      // str += item.replace("<p>", "<p style='margin:0px;'>");
      str += item.replace(
        "<p>",
        "<p style='margin:0px;text-overflow: ellipsis;overflow: hidden;-webkit-box-orient: vertical;}'>"
      );
      return str;
    },
    //点击进入详情页
    handleDetails(item) {
      console.log("点击进入详情页item==", item);
      this.$router.push({
        name: "groundDetailsHtml",
        params: {
          item: item,
        },
      });
    },
    //取消收藏
    handleNoLike(obj) {
      console.log("obj=", obj);
      Dialog.confirm({
        title: "提示",
        message: "确定将此数据移出收藏吗？",
      })
        .then(() => {
          console.log("sssss");
          // Toast.success("操作成功");
          this.getNoLike(obj.logId, obj.staffAccount, obj);
        })
        .catch(() => {});
    },
    getNoLike(logId, staffAccount, obj) {
      let listNew = [];
      let objNew = {};
      objNew.logId = logId;
      objNew.staffAccount = staffAccount;
      objNew.isCollect = "0";
      listNew.push(objNew);
      console.log("listNew===", listNew);
      // return
      this.$http({
        url: this.$http.adornUrl("/cpcpDuMiddleground/insert"),
        method: "post",
        data: this.$http.adornData(listNew, false),
      }).then(({ data }) => {
        if (data && data.code === 0) {
          Toast.success("移出成功");
          console.log("this.duList==", this.duList);
          obj.isCollect = "0"; //改变删除状态
        } else {
          Toast.fail(data.msg);
        }
      });
    },
    //单个删除
    handleDelect(item) {
      console.log("item==", item);
      Toast.success("删除成功");
      return;
      this.$http({
        url: this.$http.adornUrl("/cpcpDuMiddleground/getList"),
        method: "post",
        data: this.$http.adornData({
          logId: item.id, //id
          staffAccount: item.staffAccount, //工号
          isDelete: "0", //是否删除 0未删除 1已删除
          isCollect: this.pageSize, // 是否收藏
        }),
      }).then(({ data }) => {
        if (data && data.code === 0) {
          Toast.success("删除成功");
        } else {
          Toast.fail(data.msg);
        }
      });
    },
  },
};
</script>

<style lang='scss' scoped>
.ground_recovery {
}
.header_box {
  display: flex;
  justify-content: space-between;
  align-items: center;
  width: 100%;
  height: 2.5rem;
  line-height: 2.5rem;
  border-bottom: 1px solid #e5e5e5;
  padding: 0 10px;
}
.header_box .title {
  font-size: 1.25rem;
  //   color: #fff;
}
.header_box .imgOne {
  /* width: 25px; */
  height: 1.5625rem;
}
.header_box .imgTwo {
  width: 40px;
  /* height: 25px; */
}
.du_details_c {
  //   width: 100%;
  //   height: calc(100vh - 2.5rem);
  //   margin-left: 2%;
  //   border: 1px solid red;
  //   padding-top: 0.9375rem;
}
.du_content {
  //   width: 96%;
  /* height: calc(100vh - 200px); */
  height: calc(100vh - 40px);
  box-sizing: border-box;
  //    border: 1px solid red;
  overflow: auto;
  background: rgb(247, 247, 247);
  /* margin-top: 20px; */
  /* padding-bottom: 1.25rem; */
  padding-bottom: 4.25rem;
  padding-top: 1px;
  /* position: relative; */
}
.du_box {
  /* position: absolute;
    top: 0px;
    left: 0px; */
  display: flex;
  width: 96%;
  margin-left: 2%;
  align-items: center;
  /* border: 1px solid red; */
  background: #fff;
  /* margin-top: 1.25rem; */
  margin-top: 0.625rem;
  border-radius: 0.625rem;
  height: 5.15rem;
  /* line-height: 100px; */
  padding: 0 5px;
  position: relative;
}
.du_box .du_img {
  // width: 4.375rem;
  // height: 4.375rem;
  // margin-left: 10px;
}
.du_box .du_c {
  display: inline-block;
  margin-left: 10px;
  margin-top: 5px;
  width: 70%;
}
.du_box .du_c .du_c_i {
  margin-top: -10px;
  display: flex;
  justify-content: flex-start;
  align-items: center;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.du_box .du_c .du_c_i span:first-child {
  font-weight: bolder;
  /* font-size: 1.125rem; */
  font-size: 14px;
}
.du_box .du_c .du_c_t {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  margin-top: 5px;
  max-height: 1rem;
}
.du_box .du_c .du_c_t .get_content {
  overflow: hidden;
  text-overflow: ellipsis;
  // display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 1 !important;
}
.du_box .du_c img {
  width: 1.575rem;
  vertical-align: sub;
}
.collect {
  position: absolute;
  bottom: 7px;
  right: 0px;
}
.file_dd {
  position: absolute;
  right: 8px;
  top: -8px;
  z-index: 1;
  width: 1.375rem;
}
.no_more {
  text-align: center;
  /* margin-top: 10px; */
  margin-top: 1.5625rem;
}
/* .du_box .delete_o{
  display: none;
} */
.ground_recovery .van-icon:before {
  color: red;
  font-size: 18px;
}
.left_img img {
  width: 2.75rem;
}
</style>